import React, { useContext, useReducer,useRef } from 'react'
import myContext from './myContext'
import { Button,Input } from 'antd'
import counterReducer from '../../redux/reducer/counter'
export default function (props) {
    console.log(`props`, props)
    const context = useContext(myContext)
    const inputRef = useRef()
    const [counter, dispatch] = useReducer(counterReducer, 0)
    function btnClick (from,event) {
        // event.preventDefault()
        event.stopPropagation()
        dispatch({type:from})
    }
    function boxClick() {
        console.log(`boxClick`)
    }
    return (
        <div onClick={()=>{boxClick()}}>
            staffC - {context.name} - {context.age}
            <div>counter: {counter}</div>
            <Button onClick={(e)=>{btnClick('add',e)}}>add</Button>
            <Button onClick={(e)=>{btnClick('reduce',e)}}>reduce</Button>
            <Input placeholder="请输入" ref={inputRef}></Input>
            <Button onClick={()=>{inputRef.current.focus()}}>foucs</Button>
        </div>
    )
}
